<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>审批详情 - 消防工程集团</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            background: #f5f5f5;
            padding-bottom: 20px;
        }
        .timeline-item {
            position: relative;
            padding-left: 30px;
        }
        .timeline-item::before {
            content: '';
            position: absolute;
            left: 8px;
            top: 0;
            bottom: -20px;
            width: 2px;
            background: #e5e7eb;
        }
        .timeline-item:last-child::before {
            display: none;
        }
        .timeline-dot {
            position: absolute;
            left: 0;
            top: 4px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            border: 3px solid white;
            z-index: 1;
        }
    </style>
</head>
<body>
    <!-- Header -->
    <div class="bg-gradient-to-r from-blue-600 to-blue-700 text-white px-4 py-4 flex items-center">
        <a href="approval.html" class="mr-3">
            <i class="fas fa-arrow-left text-xl"></i>
        </a>
        <h1 class="text-lg font-semibold">审批详情</h1>
    </div>

    <!-- Status Banner -->
    <div class="bg-gradient-to-r from-orange-500 to-orange-600 text-white px-4 py-4">
        <div class="flex items-center justify-between">
            <div>
                <div class="text-lg font-bold mb-1">采购申请审批</div>
                <div class="text-sm text-orange-100">当前节点：财务审核中</div>
            </div>
            <div class="bg-white/20 rounded-full px-4 py-2">
                <span class="text-sm font-semibold">待审批</span>
            </div>
        </div>
    </div>

    <!-- Application Info -->
    <div class="bg-white mx-4 mt-4 rounded-xl shadow-sm p-4">
        <div class="text-gray-700 font-semibold mb-4 flex items-center">
            <i class="fas fa-file-alt text-blue-500 mr-2"></i>
            申请信息
        </div>
        <div class="space-y-3">
            <div class="flex justify-between">
                <span class="text-gray-500 text-sm">申请单号</span>
                <span class="text-gray-800 font-semibold">CG20240115001</span>
            </div>
            <div class="flex justify-between">
                <span class="text-gray-500 text-sm">申请类型</span>
                <span class="text-gray-800 font-semibold">采购申请</span>
            </div>
            <div class="flex justify-between">
                <span class="text-gray-500 text-sm">材料名称</span>
                <span class="text-gray-800 font-semibold">消防栓</span>
            </div>
            <div class="flex justify-between">
                <span class="text-gray-500 text-sm">规格型号</span>
                <span class="text-gray-800 font-semibold">DN100</span>
            </div>
            <div class="flex justify-between">
                <span class="text-gray-500 text-sm">数量</span>
                <span class="text-gray-800 font-semibold">50个</span>
            </div>
            <div class="flex justify-between">
                <span class="text-gray-500 text-sm">预算金额</span>
                <span class="text-red-600 font-bold">¥50,000.00</span>
            </div>
            <div class="flex justify-between">
                <span class="text-gray-500 text-sm">推荐供应商</span>
                <span class="text-gray-800 font-semibold">XX消防设备有限公司</span>
            </div>
            <div class="flex justify-between">
                <span class="text-gray-500 text-sm">关联项目</span>
                <span class="text-gray-800 font-semibold">消防工程A项目</span>
            </div>
            <div class="flex justify-between">
                <span class="text-gray-500 text-sm">紧急程度</span>
                <span class="bg-orange-100 text-orange-600 text-xs px-2 py-1 rounded">紧急</span>
            </div>
            <div class="pt-3 border-t border-gray-100">
                <div class="text-gray-500 text-sm mb-2">备注说明</div>
                <div class="text-gray-800 text-sm">项目急需，请尽快审批处理</div>
            </div>
        </div>
    </div>

    <!-- Attachments -->
    <div class="bg-white mx-4 mt-4 rounded-xl shadow-sm p-4">
        <div class="text-gray-700 font-semibold mb-4 flex items-center">
            <i class="fas fa-paperclip text-blue-500 mr-2"></i>
            附件
        </div>
        <div class="grid grid-cols-3 gap-3">
            <div class="aspect-square bg-gray-100 rounded-lg flex items-center justify-center">
                <i class="fas fa-image text-gray-400 text-2xl"></i>
            </div>
            <div class="aspect-square bg-gray-100 rounded-lg flex items-center justify-center">
                <i class="fas fa-file-pdf text-red-400 text-2xl"></i>
            </div>
        </div>
    </div>

    <!-- Process Timeline -->
    <div class="bg-white mx-4 mt-4 rounded-xl shadow-sm p-4">
        <div class="text-gray-700 font-semibold mb-4 flex items-center">
            <i class="fas fa-route text-blue-500 mr-2"></i>
            审批流程
        </div>
        <div class="space-y-4">
            <!-- Step 1 - Completed -->
            <div class="timeline-item">
                <div class="timeline-dot bg-green-500"></div>
                <div class="bg-green-50 rounded-lg p-3">
                    <div class="flex items-center justify-between mb-1">
                        <span class="font-semibold text-gray-800">项目经理审批</span>
                        <span class="text-xs text-green-600 bg-green-100 px-2 py-1 rounded">已通过</span>
                    </div>
                    <div class="text-xs text-gray-500 mb-1">处理人：张工</div>
                    <div class="text-xs text-gray-400">2024-01-15 09:30</div>
                    <div class="text-xs text-gray-600 mt-2">审批意见：同意，材料符合项目需求</div>
                </div>
            </div>

            <!-- Step 2 - Current -->
            <div class="timeline-item">
                <div class="timeline-dot bg-blue-500"></div>
                <div class="bg-blue-50 border-2 border-blue-200 rounded-lg p-3">
                    <div class="flex items-center justify-between mb-1">
                        <span class="font-semibold text-gray-800">财务审核</span>
                        <span class="text-xs text-blue-600 bg-blue-100 px-2 py-1 rounded">进行中</span>
                    </div>
                    <div class="text-xs text-gray-500 mb-1">处理人：财务部-刘会计</div>
                    <div class="text-xs text-gray-400">待处理</div>
                </div>
            </div>

            <!-- Step 3 - Pending -->
            <div class="timeline-item">
                <div class="timeline-dot bg-gray-300"></div>
                <div class="bg-gray-50 rounded-lg p-3">
                    <div class="flex items-center justify-between mb-1">
                        <span class="font-semibold text-gray-500">采购部审核</span>
                        <span class="text-xs text-gray-400 bg-gray-100 px-2 py-1 rounded">待处理</span>
                    </div>
                    <div class="text-xs text-gray-400">等待上一节点完成</div>
                </div>
            </div>

            <!-- Step 4 - Pending -->
            <div class="timeline-item">
                <div class="timeline-dot bg-gray-300"></div>
                <div class="bg-gray-50 rounded-lg p-3">
                    <div class="flex items-center justify-between mb-1">
                        <span class="font-semibold text-gray-500">子公司负责人审批</span>
                        <span class="text-xs text-gray-400 bg-gray-100 px-2 py-1 rounded">待处理</span>
                    </div>
                    <div class="text-xs text-gray-400">等待上一节点完成</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Approval Actions (if pending) -->
    <div class="px-4 mt-6 mb-6 space-y-3">
        <button class="w-full bg-gradient-to-r from-green-500 to-green-600 text-white py-4 rounded-xl font-semibold text-lg shadow-lg active:scale-95 transition-transform">
            <i class="fas fa-check mr-2"></i>
            同意
        </button>
        <button class="w-full bg-gradient-to-r from-red-500 to-red-600 text-white py-4 rounded-xl font-semibold text-lg shadow-lg active:scale-95 transition-transform">
            <i class="fas fa-times mr-2"></i>
            驳回
        </button>
    </div>

    <!-- Approval Form (hidden by default, show when click approve/reject) -->
    <div id="approvalForm" class="hidden fixed inset-0 bg-black/50 z-50 flex items-end">
        <div class="bg-white w-full rounded-t-2xl p-6 max-h-[80vh] overflow-y-auto">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold">审批意见</h3>
                <button onclick="document.getElementById('approvalForm').classList.add('hidden')" class="text-gray-400">
                    <i class="fas fa-times text-xl"></i>
                </button>
            </div>
            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">审批结果</label>
                    <div class="flex gap-3">
                        <label class="flex-1 border-2 border-green-200 rounded-lg p-3 text-center cursor-pointer">
                            <input type="radio" name="result" value="approve" class="hidden" checked>
                            <span class="text-sm text-green-600">同意</span>
                        </label>
                        <label class="flex-1 border-2 border-gray-200 rounded-lg p-3 text-center cursor-pointer">
                            <input type="radio" name="result" value="reject" class="hidden">
                            <span class="text-sm text-red-600">驳回</span>
                        </label>
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-2">审批意见 <span class="text-red-500">*</span></label>
                    <textarea placeholder="请输入审批意见" rows="4" 
                              class="w-full border border-gray-300 rounded-lg px-4 py-3 text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                </div>
                <button class="w-full bg-gradient-to-r from-blue-600 to-blue-700 text-white py-4 rounded-xl font-semibold text-lg shadow-lg">
                    <i class="fas fa-paper-plane mr-2"></i>
                    提交审批
                </button>
            </div>
        </div>
    </div>

    <script>
        // Show approval form when clicking approve/reject buttons
        document.querySelectorAll('button').forEach(btn => {
            if (btn.textContent.includes('同意') || btn.textContent.includes('驳回')) {
                btn.addEventListener('click', () => {
                    document.getElementById('approvalForm').classList.remove('hidden');
                });
            }
        });
    </script>
</body>
</html>

